/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native';
var {width,height} = require('Dimensions').get('window');
var LazyInterestedCell = React.createClass({
    getDefaultProps(){
      return {
          "name":'',
          "avatar":'',
          "distance":'',
          "unit":'',
          "detail":''
      }
    },
    getInitialState(){
      return {
          isShow:false,
          rightIcon:'inter-arrow-default'
      }
    },
    render() {
        return (
        <TouchableOpacity onPress={()=>{this.setState({isShow:!this.state.isShow})}} activeOpacity={1}>
                {this.renderInterCell()}
                {this.showDetail()}
        </TouchableOpacity>
        );
    },
    renderInterCell(){
        const rightIcon = this.state.isShow?'inter-arrow-selected':'inter-arrow-default';
        return (
            <View style={styles.container} ref="inter">
                {/*左边*/}
                <View style={{flexDirection:'row', alignItems:"center"}}>
                    <View style={styles.avatarContainer}>
                        <Image source={{uri:this.props.avatar}} style={styles.avatarImage}/>
                    </View>
                    <Text style={[styles.cellTextStyle,{width:80}]}>{this.props.name}</Text>
                    {/*中间*/}
                    <View style={styles.cellCenterStyle}>
                        <Text style={styles.cellTextStyle}>距离：</Text>
                        <Text style={{color:'#08c8c1'}}>{this.props.distance}</Text>
                        <Text style={styles.cellTextStyle}>{this.props.unit}</Text>
                    </View>
                </View>

                {/*右边*/}
                <TouchableOpacity activeOpacity={1}>
                    <Image source={{uri:rightIcon}} style={{width:20,height:16}}/>
                </TouchableOpacity>
            </View>

        )
    },
    showDetail(){
        var detail = this.props.detail.length>0?this.props.detail:'这家伙很懒,什么都没有留下';
      return  this.state.isShow?(<View style={styles.cellDetailStyle}>
          <Text style={styles.cellTextStyle}>{detail}</Text>
      </View>):(null);
    }
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height:55,
        paddingLeft:10,
        paddingRight:10,
        backgroundColor: '#FFFFFF',
        flexDirection:'row',
        alignItems:'center',
        marginBottom:1,
        justifyContent:'space-between'
    },
    cellCenterStyle:{
        flexDirection:'row',
        alignItems:'center',
    },
    cellTextStyle:{
        color:'#b4c5d3',
        fontSize:14
    },
    avatarContainer:{
        width:43,
        height:43,
        borderRadius:20.5,
        overflow:'hidden',
        borderWidth:1.5,
        marginRight:5,
        borderColor:'#08c8c1'
    },
    avatarImage:{
     width:43,
     height:43,
    },
    cellDetailStyle:{
        backgroundColor:'#ffffff',
        paddingTop:10,
        paddingLeft:53,
        paddingBottom:18
    }
});
module.exports = LazyInterestedCell;